<template>
  <div class="order">
    <!-- 标题 -->
    <div class="otitle">
      <img src="./images/right.png" alt>
      <p>确认订单</p>
    </div>
    <!-- 个人信息 -->
    <div class="operson">
      <div class="person">
        <h6>
          收货人：
          <span>向可可</span>
        </h6>
        <i>13112387891</i>
      </div>
      <p>
        收货地址：
        <span>广东省深圳市南山区科技中三路与科技中四路交汇处国人通信大厦A栋1102</span>
      </p>
      <img src="./images/turn-r.png" alt class="turn-r">
      <div class="xian">
        <img src="./images/ht.png" alt>
      </div>
    </div>
    <!-- 商品信息 -->
    <div class="thing">
      <div class="things">
        <div class="t-show">
          <div class="ts-left">
            <img src="./images/yan.png" alt>
          </div>
          <div class="ts-right">
            <h5>iqos配件烟灰缸车载烟头罐日本电子烟三代2.4plus</h5>
            <div class="choose">
              <p>
                黑色（现货）：
                <span>L</span>
              </p>
              <i>
                <img src="./images/turn-b.png" alt>
              </i>
            </div>
            <p>
              ￥884
              <span class="omoney">￥980</span>
            </p>
          </div>
        </div>
        <div class="t-num">
          <p class="t-num-word">数量</p>
          <div class="number">
            <p class="jian">-</p>
            <p class="sum">1</p>
            <p class="jia">+</p>
          </div>
        </div>
        <div class="t-ano">
          <p class="talk">留言：</p>
          <textarea
            class="tcp_content"
            placeholder="特殊需求请留言（45字以内）"
            maxlength="45"
            onchange="this.value=this.value.substring(0,45)"
            onkeydown="this.value=this.value.substring(0,45)"
            onkeyup="this.value=this.value.substring(0,45)"
          ></textarea>
        </div>
      </div>
    </div>
    <!-- 优惠券 -->
    <div class="oyhq">
        <table class="youhui">
            <tr class="yh1">
                <td class="yhq1">优惠券</td>
                <td class="yhq2">
                    <p><span class="three">3</span>张</p>
                    <img src="./images/turn-r.png" alt="">
                </td>
            </tr>
            <tr class="yh2">
                <td class="yhq1">余额：<span>0.0元可用</span> </td>
                <td class="yhq2"><img src="./images/nochoose.png" alt=""></td>
            </tr>
        </table>
        <div class="yh3">
            <p class="yhq1">赚更多</p>
            <p class="yhq2">升级会员赚<span>￥5.88</span>元起</p>
            <p class="yhq3">立即升级</p>
            <p class="yhq4"><img src="./images/right1.png" alt=""></p>
        </div>
    </div>
    <!-- 运费 -->
    <div class="yunfei">
      <table class="yf">
          <tr>
              <td>
                  <p>运费：￥ </p>
                  <span> 0.00</span>
              </td>
              <td class="zje">
                  <p class="zjeword">商品总金额：</p>
                  <span class="zjemoney">￥ 884.00</span>
              </td>
          </tr>
      </table>
    </div> 
    <!-- 添加地址 -->
    <div class="addlocation">
        <table class="addlist">
            <tr class="tishi">
                <td class="ts1">提示</td>
            </tr>
             <tr class="add">
                <td class="add-click">您还没有添加收货地址，请点击添加</td>
            </tr>
             <tr class="sure">
                <td class="sure-no">取消</td>
                <td class="sure-add">添加</td>
            </tr>
        </table>
        <img src="./images/xxx.png" alt="">
    </div>
    <!-- 支付 -->
    <div class="opay">
        <div class="paynum">
            <p>加入购物车</p>
        </div>
        <div class="gopay">
            <p>马上买</p>
        </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {};
  }
};
</script>
<style>
.addlocation{
    width: 90%;
    margin: 0 auto;
    position: relative;
    background: #fff;
    position: absolute;
    top: 2.8rem;
    left: 0.3rem;
}
.addlocation img{
    width: 0.3rem;
    height: 0.3rem;
    position: absolute;
    top: 0;
    right: 0;
}
.addlist{
    width: 100%;
}
.addlist .tishi{
    border-bottom: 0.01rem solid #EFF1F3;
}
.addlist .tishi .ts1{
    width: 100%;
    font-size:0.3rem;
    font-family:PingFang-SC-Bold;
    font-weight:bold;
    text-align: center;
    background: #fff;
}
.add{
    width: 100%;
    height: 4.4rem;
    border-bottom: 0.01rem solid #EFF1F3;
}
.add-click{
    font-size:0.3rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color: #191E2A;
    text-align: center;
}
.sure{
    width: 100%;
    text-align: center;
}
.sure-no{
    display: block;
    width: 50%;
    height:0.8rem;
    font-size:0.3rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    line-height: 0.8rem;
    float: left;
    border-right: 0.01rem solid #EFF1F3;
}
.sure-add{
    display: block;
    width: 49%;
    height:0.8rem;
    font-size:0.3rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color: #F52E67;
    float: left;
    line-height: 0.8rem;
}






.order {
  width: 100%;
  background: #f5f6f7;
}
.otitle {
  width: 100%;
  height: 0.88rem;
  position: relative;
  background: #fff;
}
.otitle img {
  width: 0.22rem;
  height: 0.32rem;
  position: absolute;
  top: 50%;
  margin-top: -0.14rem;
  left: 0.3rem;
}

.otitle p {
  font-size: 0.32rem;
  font-weight: bold;
  font-family: PingFang-SC-Bold;
  text-align: center;
  line-height: 0.9rem;
  color: #191e2a;
}
.operson {
  width: 100%;
  position: relative;
  margin-top: 0.2rem;
  background: #fff;
}
.person {
  width: 92%;
  height: 0.3rem;
  padding-top: 0.3rem;
  box-sizing: border-box;
  /* margin-left: 0.3rem; */
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.person h6 {
  display: inline-block;
  font-size: 0.28rem;
  font-weight: bold;
  color: #191e2a;
  font-family: PingFang-SC-Bold;
}
.person i {
  display: inline-block;
  font-style: normal;
  color: #191e2a;
  font-size: 0.26rem;
  font-weight: medium;
}
.operson p {
  font-size: 0.28rem;
  color: #191e2a;
  font-weight: medium;
  line-height: 0.44rem;
  clear: both;
  display: inline-block;
  width: 78%;
  margin-top: 0.6rem;
  padding-left: 0.3rem;
  padding-right: 0.92rem;
}
.turn-r {
  width: 0.14rem;
  height: 0.2rem;
  position: absolute;
  top: 1.2rem;
  left: 95%;
}
.xian {
  margin-top: 0.12rem;
}
.xian img {
  width: 100%;
  height: 0.1rem;
}
.thing {
  width: 100%;
  background: #fff;
  margin-top: 0.2rem;
}
.things {
  height: 4.92rem;
}
.t-show {
  width: 92%;
  height: 2.6rem;
  padding-top: 0.3rem;
  box-sizing: border-box;
  margin: 0 auto;
  /* background: yellow; */
}
.ts-left {
  width: 2.3rem;
  height: 2.3rem;
  float: left;
  overflow: hidden;
  border-radius: 0.1rem;
  border: 0.01rem solid #eaeaea;
}
.ts-left img {
  width: 2.2rem;
  height: 2.2rem;
  margin-top: 0.05rem;
  margin-left: 0.05rem;
}
.ts-right {
  width: 4.2rem;
  float: left;
  margin-left: 0.3rem;
}
.ts-right h5 {
  font-size: 0.3rem;
  color: #191e2a;
  font-weight: bold;
  line-height: 0.4rem;
}
.ts-right .choose {
  width: 2.1rem;
  height: 0.3rem;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
  border-radius: 0.06rem;
  background: #f5f5f6;
  position: relative;
}
.ts-right .choose p {
  font-size: 0.22rem;
  color: #c1c3c6;
  display: inline-block;
}
.ts-right .choose i {
  width: 0.14rem;
  height: 0.09rem;
  display: inline-block;
  position: absolute;
  top: -0.04rem;
  left: 1.86rem;
}
.ts-right .choose i img {
  width: 0.14rem;
  height: 0.09rem;
}
.ts-right p {
  font-size: 0.26rem;
  color: #f52e67;
  font-size: medium;
  font-weight: bold;
}
.ts-right p .omoney {
  display: inline-block;
  font-weight: 200;
  color: #b3b5b8;
  margin-left: 0.4rem;
  text-decoration: line-through;
}
.t-num {
  width: 92%;
  height: 1.3rem;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-bottom: 0.01rem solid #efefef;
}
.t-num-word {
  font-size: 0.3rem;
  color: #191e2a;
  line-height: 1.3rem;
}
.t-num .number {
  width: 1.8rem;
  height: 0.55rem;
  position: absolute;
  top: 50%;
  margin-top: -0.27rem;
  right: 0;
  border: 0.01rem solid #dedfe3;
}
.t-num .number p {
  float: left;
  text-align: center;
  color: #ccc;
  line-height: 0.55rem;
}
.jian,
.jia {
  width: 0.5rem;
}
.sum {
  width: 0.76rem;
  height: 0.55rem;
  border-left: 0.01rem solid #dedfe3;
  border-right: 0.01rem solid #dedfe3;
}
.t-ano {
  width: 92%;
  height: 1.4rem;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  /* background: yellowgreen; */
}
.talk {
  font-size: 0.3rem;
  color: #191e2a;
  line-height: 0.8rem;
  float: left;
}
.tcp_content {
  float: left;
  width: 86%;
  height: 0.6rem;
  margin-top: 0.26rem;
  color: #9fa0a5;
  font-size: 0.28rem;
  border-style: none;
  outline: none;
  resize: none;
  overflow: hidden;
}

.oyhq{
        width: 100%;
        background:#fff;
        margin-top: 0.2rem;
        padding-bottom:0.2rem;
    }
    .youhui{
        width:93%;
        height: 3.02rem;
        margin: 0 auto;
        position: relative;
    }
    .youhui tr{
        width: 100%;
        height: 1rem;
    }
    .youhui tr td{
        font-size: medium;
        font-size: 0.3rem;
        line-height: 1rem;
        color: #191E2A;
    }
    .yh1 .yhq1,.yh2 .yhq1{
        width: 76%;
    }
    .yh1{
        overflow: hidden;
    }
    .yh1 .yhq2{
        display: block;
        margin-left: 2.6rem;
        line-height: 1rem;
    }
    .yh1 .yhq2 p{
        float: left;
    }
     .yh1 .yhq2 p .three{
        color: #F52E67;
    }
    .yh1 .yhq2 img{
        width: 0.14rem;
        height: 0.2rem;
        float: left;
        margin-left: 0.1rem;
        margin-top: 0.4rem;
    }
    .yh2{
        border-top: 0.01rem solid #EFF1F3;
        border-bottom: 0.01rem solid #EFF1F3;
    }
    .yh2 .yhq1 span{
        color: #9FA0A5;
    }
    .yh2 .yhq2{
        display: block;
        margin-left: 2.4rem;
        padding-top: 0.4rem;
        box-sizing: border-box;
    }
    .yh2 .yhq2 img{
        width: 1rem;
        height: 0.6rem;
    }
    .yh3{
        width: 93%;
        height: 1.1rem;
        margin: 0.4rem auto;
        position: relative;
        border-radius: 0.16rem;
        background: #F6E3BE;
    }
    .yh3 .yhq1{
        display:block;
        width: 1.3rem;
        height: 0.6rem;
        background: #E7CD9A;
        font-size:0.26rem;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color: #fff;
        text-align: center;
        line-height: 0.6rem;
        border-radius: 0.2rem;
        position: absolute;
        top: 0.28rem;
        left: 0.2rem;
    }
    .yh3 .yhq2{
        display:block;
        font-size:0.28rem;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        color:#412A00;
        line-height:28px;
        position: absolute;
        top: 0.27rem;
        left: 1.68rem;
    }
    .yh3 .yhq2 span{
        color: #FF6D74;
    }
    .yh3 .yhq3{
        display:block;
        font-size: 0.26rem;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        color:#412A00;
        line-height:0.28rem;
        position: absolute;
        top: 0.4rem;
        left: 5.3rem;
    }
    .yh3 .yhq4{
        position: absolute;
        top: 0.38rem;
        left: 6.6rem;
    }
    .yh3 .yhq4 img{
        width:0.12rem;
        height:0.19rem;
    } 
/* 运费 */
.yunfei {
  width: 100%;
  background: #fff;
  margin-top: 0.2rem;
}
.yf {
  width: 75%;
  height: 1.3rem;
  margin-left: 20%;
}
.yf tr td {
  overflow: hidden;
  line-height: 1.3rem;
}
.yf tr td p {
  font-size: 0.3rem;
  color: #9fa0a5;
  float: left;
}
.yf tr td span {
  font-size: 0.3rem;
  color: #9fa0a5;
  float: left;
}
.zje {
  display: block;
  margin-left: 0.6rem;
}
.zje .zjemoney {
  color: #f52e67;
}
/* 支付 */
.opay{
    width: 100%;
    height: 1rem;
    margin-top: 1.1rem;
}
.paynum{
    width: 50%;
    height: 1rem;
    float: left;
    overflow: hidden;
    line-height: 1rem;
    background: #22262F;
}
.paynum p{
    font-size: 0.3rem;
    color: #fff;
    font-weight: bold;
    float: left;
    margin-left: 31%;
}
.gopay{
    width: 50%;
    height: 1rem;
    float: left;
    background: #F52E67;
}
.gopay p{
    font-size: 0.3rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 1rem;
}


</style>
